<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="scss">
.plugins-red-box {
  width: 100vw;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  // padding: 0 36px;
  height: 100vh;
  box-sizing: border-box;
  border-radius: 0;
  overflow: hidden;
}
.plugins-red-container {
  position: absolute;
  z-index: 10000;
  top: 50%;
  left: 50%;
  width: 100%;
  padding: 0 36px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 1;
  border-radius: 0;
  color: #000;
  .plugins-red-img {
    position: relative;
    top: 50%;
    left: 50%;
    z-index: 11111;
    transform: perspective(1);
    animation: roteTrans 1s ease-out;
    -webkit-animation: roteTrans 1s ease-out;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);

    .redImg {
      width: 100%;
      height: 100%;
      //   object-fit: contain;
    }
    .topImg {
      width: 100%;
      height: 31px;
      position: absolute;
      top: 7%;
      left: 50%;
      transform: translateX(-50%);
      object-fit: contain;
    }
    .openRed {
      width: 100px;
      height: 100px;
      object-fit: contain;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 20%;
    }
    .openRed.active {
      animation: rotate 1s linear infinite;
      -webkit-animation: rotate 1s linear infinite;
    }
    .plugin-red-trip {
      position: absolute;
      left: 50%;
      width: 100%;
      transform: translate(-50%);
      bottom: 40px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #ffe3bb;
    }
  }
  .plugin-red-img2 {
    animation: hideTrans .8s linear infinite;
  
    -webkit-animation: hideTrans .8s linear infinite;
  }
  .bottom-tip {
    width: 100%;
    margin-top: 16px;
    //   padding: 0 36px;
    box-sizing: border-box;
    font-family: PingFangSC-Regular;
    font-size: 13px;
    text-align: center;
    color: #9a3e3a;
    .bottom-tip-text {
      padding: 11px 20px;
      background-color: #fedcc2;
      border-radius: 12px;
    }
  }
}

.mui-popup-backdrop {
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
}
</style>
